fashion-ssr-vue3/pages/categories/[slug].vue

<script lang='ts' setup>
import { useCommonStore } from '@/stores/modules/common'

const commonStore = useCommonStore()
const list = [
  {
    id: 1,
    title: 'Stationary & Office Supplies',
    description: 'Discover bestsellers and fresh arrivals tailored to your niche.',
    img: 'https://picsum.photos/560/310',
  },
  {
    id: 2,
    title: 'Stationary & Office Supplies',
    description: 'Discover bestsellers and fresh arrivals tailored to your niche.',
    img: 'https://picsum.photos/560/310',
  },
  {
    id: 3,
    title: 'Stationary & Office Supplies',
    description: 'Discover bestsellers and fresh arrivals tailored to your niche.',
    img: 'https://picsum.photos/560/310',
  },
  {
    id: 4,
    title: 'Stationary & Office Supplies',
    description: 'Discover bestsellers and fresh arrivals tailored to your niche.',
    img: 'https://picsum.photos/560/310',
  },
]
const { openLoginAndDownloadModal } = useLoginAndDownLoadModal()

async function clickLoginAndDownload(item: any) {
  try {
    commonStore.setDownloadCatalog(item)
    const { status } = await openLoginAndDownloadModal()
    if (status)
      location.reload()
  }
  catch (error) {
    console.log(error)
  }
}
</script>

<template>
  <div>
    <div class=" bg-#0F0820">
      <div class="header w-1200-auto text-center flex items-center justify-center h-600px  bg-no-repeat bg-center" style="background-image: url('https://picsum.photos/420/420')">
        <h1 class="text-58px fw-800 text-#fff ls-2 custom-title-font">
          STATIONARY & OFFICE SUPPLIES
        </h1>
      </div>
    </div>
    <div class="py-120px w-1200-auto text-center">
      <h2 class="text-36px fw-800 text-#333 !mb-20px custom-title-font">
        Our Latest Product <span class="custom-title-bg04">Catalogs</span>
      </h2>
      <div class="text-#999 text-22px mb-40px">
        Discover bestsellers and fresh arrivals tailored to your niche.
      </div>
      <div class="grid grid-cols-2 gap-64px text-left">
        <div v-for="item in list" :key="item.id">
          <business-categories-comp-item :item="item" @select="clickLoginAndDownload" />
        </div>
      </div>
    </div>
    <common-block-catalogs />
    <common-block-blog class="!pb-0" />
    <AppFooter />
  </div>
</template>

<style lang='less' scoped>
.header{
  background-position: 50% 75%;
}
</style>